<template>
  <!-- <h1>Hello App!</h1>
  <p>
    <strong>Current route path:</strong> {{ $route.fullPath }}
  </p> -->
  <!-- <nav>
    <RouterLink to="/">Go to Home</RouterLink>
    <RouterLink to="/remove">Go to About</RouterLink>
  </nav> -->
  <header>
    <div class="header-logo">
      <img src="./assets/logo.png" alt="logo" />
      <span class="junyu">君喻科技</span>
    </div>
    <nav >
      <RouterLink
        to="/"
        class="nav-link"
        :class="{ 'nav-link-active': $route.path === '/' }"
      >
      <div class="nav-item">
      <div>首页</div> 
        <div :class="{ 'nav-horizontal': $route.path === '/' }"></div>
      </div>
      </RouterLink>
      <RouterLink
        to="/about"
        class="nav-link"
        :class="{ 'nav-link-active': $route.path === '/about' }"
      > <div class="nav-item">关于我们
        <div :class="{ 'nav-horizontal': $route.path === '/about' }"></div>
      </div>
      </RouterLink>
    </nav>
    <div class="tail"></div>
  </header>
  <main>
    <RouterView />
  </main>
</template>

<style scoped>
header {
  width: 100vw;
  height: 65px;
  position: fixed;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #f8f8f8;
  z-index: 99;
}

.header-logo {
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tail{
  width: 30%;
}
.header-logo img {
  margin-right: 10px;
}
.junyu {
  color: #0e0729;
  text-align: center;
  font-family: Pangmen;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
nav {
  display: flex;
  width: 900px;
  justify-content: space-around;
}
.nav-item{
  display: flex;
  align-items: center;
  flex-direction: column;
}
.nav-link {
  color: #0e0729;
  font-family: "Alibaba_PuHuiTi_Bold";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.nav-link:hover {
  background-color: transparent; /* 悬停时背景颜色透明 */
}
.nav-link-active {
  color: #562ee7;
  font-family: "Alibaba_PuHuiTi_Bold";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.nav-horizontal{
  width: 20px;
  border-radius: 1.5px;
  border-bottom: 3px solid #562EE7;
  margin-top: 4px
}
.menu-icon {
  display: none;
  font-size: 24px;
  cursor: pointer;
}
main {
  padding-top: 65px;
}
@media (max-width: 600px) {
  header{
    height: 50px;
  }
  .header-logo img{
    width: 19px;
height: 20px;
flex-shrink: 0;
  }
  .tail{
  width: 0%;
}
  .junyu{
    width: 75px;
    color: #0E0729;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
  }
  nav {
    width: 125px;
    position: absolute;
        right: 14px;
        gap: 40px;
  }
  .nav-item{
font-size: 12px;
  }



  main {
    padding-top: 50px;
  }

}
</style>